iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
自我挑戰組

UI / UX 設計白皮書 - Material Design 導讀系列 第 17

UI / UX 設計白皮書 / Material Design 導讀_Day17 Interaction 相互作用

  • 分享至 

  • xImage
  •  

昨天我們了解到 Motion 動作中,轉場動畫可以藉由控制速度及緩和速度帶給用戶順暢的畫面轉場,搭配持續時間的運用可以讓轉場效果如同自然物體的動態。藉由編排動畫的順序安排畫面中的物件,元件改變形狀之後依照層次結構顯示,最後搭配符合品牌風格的轉場效果動畫。除了可以提高注目性也可以幫助用戶順暢的完成任務。

今天我們進入到 Material Design 中 Interaction 相互作用的章節,由於內容涵蓋的範圍較廣,我們會分成兩天來介紹,今天會先了解動作和運動系統,讓我們繼續看下去吧。


Interaction 相互作用

Gestures 手勢
Selection 選擇
States 狀態

用戶通過手勢觸摸與螢幕元件進行互動。

Gestures 手勢

用戶通過手勢觸摸快速且直覺的執行任務。使用手勢觸摸提供了另一種執行任務的方式。在有效的範圍都可以依照手勢執行任務。允許手勢觸摸直接更改 UI 元件。(例如: 縮放地圖)

本圖片截取自 Material Design。

Material 即時響應手勢表達用戶對觸摸互動的直接控制。用戶操作手勢的速度與螢幕上元件移動的速度相同。在執行手勢動作時不要完全依照手勢在畫面中產生歪曲的移動效果,而是將移動動畫順暢執行。

元件的外觀和行為應傳達出是否可以對它們執行手勢,並用視覺提示可以執行手勢,例如: 在元件邊緣顯示圖示箭頭清楚的指示可以拉開區域。在元件上預先設計與手勢互動有關的狀態指示,例如: 用戶使用手勢在拖移元件的過程中顯示刪除圖示。

當用戶執行手勢時,元件動態指示手勢執行的元件移動方式 ( 例如: 手勢下移時把原本全螢幕的圖片關閉 )。執行動作的手勢應使用能傳達手勢動作的圖示。( 例如: 滑動物件後出現圖示,當手勢移動超過區域元素一半寬度時,在手勢完成後執行操作。)

手勢類型可幫助用戶在區塊之間導覽,執行操作和操縱元件內容。手勢類型包括:導覽手勢、動作手勢、變換手勢。

導覽手勢可幫助用戶輕鬆瀏覽產品。導覽手勢提供了更多變換顯式的方式,例如: 按鈕和導覽組件。導航手勢的類型包括:點按、滾動和平移、拖動、滑動、收縮。在手勢設計上請避免同一個手勢產生兩種不同結果的情況。

  • 點按: 用戶可以通過觸摸元件前往目的地。
  • 滾動和平移: 用戶可以垂直、水平或在全螢幕滑動執行連續移動內容。
  • 拖動: 用戶可以拖動拉開摺疊區域。
  • 滑動: 用戶可以在同主題之間水平移動畫面,例如: 項目頁籤。
  • 收縮: 用戶可以在畫面內容縮放區塊導覽。

動作手勢是藉由手勢執行動作或提供完成動作的快速方法。動作手勢的類型包括:

  • 點按或長按: 點按手勢和長按手勢分別允許用戶與元件進行互動並執行其他功能。
  • 滑動: 用戶可以滑動元件在超過元素一半寬度時執行預設操作。

用戶可以使用手勢來改變元件的大小、位置和旋轉。變換手勢的類型包括:

  • 輕按兩下: 輕按或兩次輕按,即可放大或縮小內容。
  • 複合手勢: 用戶可以在各種手勢之間轉換使用。
  • 拿起並移動: 長按並允許用戶重新排列內容區塊。

Selection 選擇

用戶選擇操作特定項目後將操作應用於選定的項目。

觸控裝置
在觸摸設備上使用以下手勢選擇項目:

  • 長按或兩指觸摸
  • 選擇捷徑方式(如果可用),例如點擊頭像

桌上型裝置
在桌上型裝置上,除非選擇項目是 UI 中的主要活動,否則帶有復選框的項目不應預設(或永久)顯示複選框,應僅顯示複選框(或類似指示符號):

  • 懸停在元件上方時顯示目前項目的單個複選框
  • 選擇第一個項目後,顯示組件中其餘項目的複選框

本圖片截取自 Material Design。

要選擇一個項目並進入選擇模式,請長按該項目或使用捷徑方式,例如: 點擊該項目選相框,要選擇其他項目請點選每個項目。

要取消選擇,點按選中的項目即可取消選擇為止,或者點按工具欄上的取消選擇。

要同時選擇多個項目,請在項目之間使用長按並拖動手勢即可選擇。如果應用已經預設該手勢來選取和移動項目則會執行預設手勢。

要進行選擇時,請將滑鼠懸停在項目上並顯示選取框。然後可以單擊該選取框進行複選。

要指示選擇,請在選中的項目或選相框上顯示打勾圖示和半透明色塊覆蓋。選中的項目應與未選擇的項目區分。

States 狀態

狀態是用於傳達組件或互動式元件狀態的視覺表現,相同狀態在視覺上都應該相似並且不能徹底改變組件,必須具有清楚的功能與其他狀態和周圍的排版區分開。當同時出現多個狀態(例如: 選取和聚焦)時,應同時顯示兩個狀態圖示。

狀態類型有:

  • Enabled 啟用狀態傳達互動式組件或元件。
  • Disabled 禁止使用狀態表示無法互動的組件或元件。
  • Hover 當用戶將鼠標置於互動式元件上方停留時,元件產生的視覺回饋。
  • Focused 使用鍵盤或語音輸入時,正在執行的元件處於聚焦狀態突顯元件。
  • Selected 選取狀態傳達用戶的選擇。
  • Activated 觸發狀態傳達顯示的目標,無論是由用戶觸發還是預設情況下。
  • Pressed 按下狀態傳達用戶點擊。
  • Dragged 用戶按下並移動元件時即可拖動元件。
  • On/Off 開關狀態表示兩個選項之間的切換。
  • Error 錯誤狀態表示用戶或系統錯誤。

本圖片截取自 Material Design。

覆蓋是一種使用半透明色塊來表現狀態的系統方法,在元件上增加半透明色塊覆蓋,可以應用於整個元件或選取元件。覆蓋層使用的顏色應與元件上的內容或圖示搭配,如果內容或圖示在狀態過程有改變顏色,則半透明色塊要依據最終元素色彩搭配調整,在顏色的搭配上要注意元件整體可見性及顏色對比度,針對不同組件調整。

單一元件上一次只顯示一個狀態效果。例如: 元件被聚焦然後用戶鼠標停留在元件上方,則顯示鼠標停留的狀態直到用戶移開鼠標;這時如果該元件仍然處於聚焦狀態則元件此時可以顯示聚焦狀態。

當組件或元件不是可以使用或是無法使用時就會顯示禁止狀態,禁止狀態可以通過顏色變化和降低高度陰影表示無法使用,在整體元件設計為 38% 透明度,降低元件在畫面中的存在感。禁用元件可以顯示鼠標停留但是不會有任何狀態更改。在組件中能同時存在多個禁用元件。

可以繼承用戶禁止狀態的元件: 切換按鈕、選取元件、文字段落、圖示、網格和列表項目、區塊、芯片標籤和按鈕。

無法繼承用戶禁止狀態的元件:浮動操作按鈕(FAB)、按鈕和側拉式選單、對話框、選單、工具列和警報、導覽組件(例如應用列、選單、底部導覽列和 steppers 步驟條)。如果 FAB 無法使用應隱藏其元件。

停留狀態由用戶使用鼠標在互動式元件上停留而觸發,可以應用於所有互動式組件,使用低強調性的淡入淡出動畫效果避免強調停留狀態以免干擾內容。使用覆蓋來表現用戶停留狀態,可以應用於整個組件或單一元件甚至是元件內的元素。停留狀態可以與聚焦、啟用、選取或按下狀態結合使用,在整個畫面中只能有一個元件表現停留狀態。

針對畫面上每個不同組件調整覆蓋色塊的透明度數值,保持元件整體可見性及顏色對比度及用戶可以選取的狀態,應調整用戶停留狀態色塊透明度數值,避免分散注意力。(在淺色區塊疊加色塊透明度為 4%,在深色區塊疊加色塊透明度為 8%,在圖片上疊加色塊透明度為 12%。)

可以繼承用戶停留狀態的元件:按鈕、浮動操作按鈕(FAB)、切換按鈕、選取元件、網格、列表、列表項目、區塊、芯片標籤、文字段落和圖示。

無法繼承用戶停留狀態的元件:應用列表、標籤、底部導覽列、表格、對話框、警報、選單和步驟條。

聚焦狀態是當用戶使用鍵盤或語音輸入,依照畫面構圖的讀取順序,直到用戶完成輸入時正在執行的元件處於聚焦狀態突顯元件。聚焦狀態適用於所有互動式元件,使用淡入淡出動畫顯示和消失,聚焦狀態是所有狀態中最顯眼的狀態。當使用覆蓋來表現聚焦狀態時,覆蓋可以應用於整個組件或單一元件甚至是元件內的元素。

保持元件整體可見性及顏色對比度與用戶可以選取的狀態,應調整聚焦狀態的色塊透明度數值達成聚焦功能。( 在淺色區塊疊加色塊透明度為 12%,在深色區塊疊加色塊透明度為 24%,在圖片上疊加色塊透明度為 36%。)

可以繼承聚焦狀態的元件:按鈕、浮動操作按鈕(FAB)、選取元件、網格、列表、列表項目、區塊、芯片標籤、文字段落和圖示。

用戶可用點擊、鍵盤、鼠標和語音來選擇選項,被選取的項目呈現選取狀態提供識別,但不能分散用戶的注意力。可以運用覆蓋來表示選取狀態於組件或組件內的元件,使用淡入淡出動畫顯示和消失,選取狀態依照用戶選取的順序顯示。選取狀態可以和用戶鼠標停留、聚焦、按下和拖動狀態結合起來表現。整個畫面可能同時存在多個選取狀態。

可以繼承選取狀態的元件:圖片列表、列表項目、區塊、芯片標籤、數據表格、選單項目、步驟條。

無法繼承選取狀態的元件:應用列表、背景,底部導航、底部導覽列、表格、對話框、按鈕、分隔線、可擴展區塊、警報、消息欄、選項區塊、文字段落和工具提示。

保持元件整體可見性及顏色對比度及用戶可以選取的狀態,應調整選取狀態色塊透明度數值完成重點突出。(在淺色區塊疊加色塊透明度為 8%,在深色區塊疊加色塊透明度為 16%,在圖片上疊加色塊透明度為 24%。)

觸發狀態表示用戶正在觀看介面中項目,預設顯示主題或是由用戶選擇 ( 例如: 點擊、鍵盤、鼠標和語音 ),觸發狀態應被強化顯示。當運用覆蓋色塊來呈現觸發狀態,可以藉由色塊更改或是使用元件內的元素與線段來呈現,觸發狀態使用淡入淡出動畫顯示和消失,觸發狀態依照用戶選取的順序顯示。觸發狀態與選取狀態的差異在觸發狀態傳達了突出顯示的目的。觸發狀態可以與用戶鼠標停留、焦點狀態和結合使用,在一組選項中一次只能出現一個觸發狀態。

可以繼承觸發狀態的元件:導覽列表項目、選項區塊、底部導覽列、步驟條項目、芯片標籤、切換按鈕。

無法繼承觸發狀態的元件:按鈕、浮動操作按鈕(FAB)、控制項目、拉霸、應用列、底部導覽列、側拉是選單、對話框或警報。

保持元件整體可見性及顏色對比度及用戶可以選取的狀態,應調整觸發狀態色塊透明度數值,觸發狀態應設定較高的透明度,因為觸發狀態不一定是用戶選取的,也有可能是預設觸發。( 在淺色區塊疊加色塊透明度為 12%,在深色區塊疊加色塊透明度為 24%,在圖片上疊加色塊透明度為 36%。)

按下狀態是用戶通過鼠標、鍵盤或語音輸入啟動的輸入或點擊。此狀態適用於所有互動式組件。按下狀態會讓畫面結構更改需要高度重視。按下狀態使用圓形區塊表現執行狀態,使用圓形點擊動畫顯示和消失。可以應用於整個組件或單一元件甚至是元件內的元素。按下狀態可以與用戶鼠標停留、聚焦、觸發和選取狀態和結合使用,在畫面中只能出現一個按下狀態。

可以繼承按下狀態的元件:按鈕、浮動操作按鈕(FAB)、切換按鈕、選取控制元件、網格列表項目、列表項目、區塊、芯片標籤、文字段落和圖示。

無法繼承按下狀態的元件:應用列表、標籤、底部導覽列、工作表、對話框、選單、步驟條或警報。

保持元件整體可見性,應調整按下狀態色塊透明度數值,按下狀態應設定較高的透明度,因為按下狀態會觸發整個畫面的更改。( 在淺色區塊疊加色塊透明度為 16%,在深色區塊疊加色塊透明度為 32%,在圖片上疊加色塊透明度為 48%。)

當用戶按住並移動元素或組件時,會產生拖動狀態,拖動狀態不需要設置太過顯眼的動態,避免分散用戶注意。使用覆蓋色塊來表現拖動狀態,拖動狀態使用淡入淡出動畫顯示和消失,依照用戶拖動即時給予移動回饋,覆蓋色塊可以應用於整個拖動狀態的組件或元件中。

可以繼承拖動狀態的元件:網格列表項目、列表項目、區塊、芯片標籤。

無法繼承拖動狀態的元件:應用列表、按鈕、底部導覽列、對話框、選單、步驟條或警報。

保持元件整體可見性,應調整拖動狀態色塊透明度數值,拖動狀態應設定較低的透明度,避免分散用戶對內容的注意力。( 在淺色區塊疊加色塊透明度為 8%,在深色區塊疊加色塊透明度為 16%,在圖片上疊加色塊透明度為 32%。)

今天我們了解到 Interaction 相互作用使用各種手勢可以對不同元件產生互動,透過不同手勢類型可以執行不同的任務指令,並依照應用程式預設好的狀態與產品進行互動,互動式組件同時也呼應了使用者的手勢給予狀態回饋,元件狀態根據重要性來強調視覺外觀或動畫效果,強調需要受到注目的元件狀態,讓用戶能順暢的完成目標動作。

終於結束落落長的一篇,明天讓我們繼續完成 Communication 傳達的章節、每天一點一點的逐個擊破,找出那些藏在細節中的魔鬼,不要讓大魔王有機會可以捉弄我們,迎向更美好的介面設計吧(握拳)!

如果您喜歡這篇文章或是這篇文章有幫助到您,歡迎按讚鼓勵,我們明天見囉~


上一篇
UI / UX 設計白皮書 / Material Design 導讀_Day16 Motion 動作
下一篇
UI / UX 設計白皮書 / Material Design 導讀_Day18 Communication 通訊
系列文
UI / UX 設計白皮書 - Material Design 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言